<template>
  <div class="advance-table-body">
    <!--搜索栏-->
    <el-form class="search-form--inset" ref="elForm" :model="queryParams" inline size="small" label-width="100px" label-position="left">
      <div class="titleLabel">点数金额配置</div>
      <div class="flex">
        <div class="contentLabel">当前配置</div>
        <div class="tagLabel">（用户订单充值金额达到则生成对应面值卡密）</div>
      </div>
    </el-form>
    <!--操作栏-->
    <div class="table-operator">
      <el-button type="primary" size="small" plain @click="clickBtnAdd">添加一条</el-button>
    </div>
    <!--表格-->
    <el-table
      class="k-table"
      ref="table"
      @selection-change="handleSelectionChange"
      :data="tableList"
      v-loading="loading"
    >
      <el-table-column label="多选" type="selection" align="center" fixed width="50" />
      <el-table-column label="充值金额" align="left" prop="money" min-width="100px" show-overflow-tooltip />
      <el-table-column label="卡密点数" align="left" prop="point" min-width="100px" show-overflow-tooltip />
      <el-table-column label="状态" align="left" width="150" fixed="right">
        <template #default="{ row }">
          <el-switch active-value="0" inactive-value="1" v-model="row.status" @change="statusChange(row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="150" fixed="right">
        <template #default="{ row }">
          <el-button type="text" @click="clickBtnEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <trust-pagination
      :total="total"
      :page-size.sync="queryParams.pageSize"
      :current-page.sync="queryParams.pageNum"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"></trust-pagination>
    <point-amount-dialog ref="pointAmountDialogRef"></point-amount-dialog>
  </div>
</template>
<script>
import { saTableMixin } from '@/views/custom/mixin/saTableMixin';
import PointAmountDialog from '@/views/custom/pointOperation/pointAmountConfiguration/pointAmountDialog.vue';
import request from '@/utils/request';
export default {
  name: "pointAmountConfiguration",//点数金额配置
  components: { PointAmountDialog },
  mixins: [saTableMixin],
  data() {
    return {
      rules: [],
      options: [],
    }
  },
  mounted() {
    this.requestData("point_config/list","get",this.queryParams);
  },
  methods:{
    clickBtnEdit(row){
      this.$refs.pointAmountDialogRef.openDiaolog(1,row.id,()=>{
        this.refreshTableData();
      });
    },
    clickBtnAdd(){
      this.$refs.pointAmountDialogRef.openDiaolog(0,null,()=>{
        this.refreshTableData();
      });
    },
    //状态回调的变化
    statusChange(val){
      let parm = {
        id:val.id,
        status:val.status,
      }
      this.requestDataEdit(parm)
    },
    //网络-根据ID修改用户信息
    requestDataEdit(parm){
      this.loading = true;
      request({
        url:`/point_config`,
        method:'put',
        data: parm,
      }).then(response =>{
        this.loading = false;
        this.$message.success(response.msg);
        this.refreshTableData();
      })
    },
  }
}
</script>

<style scoped>
.titleLabel{
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.contentLabel{
  font-size: 14px;
  color: #666666;
}
.tagLabel{
  font-size: 14px;
  color: #999999;
}
.flex{
  display: flex;
}
</style>
